<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          {{form.college}}
        </el-form-item>
        <el-form-item label="专业">
          {{form.major}}
        </el-form-item>
        <el-form-item label="学院/专业">
          <el-cascader :options="college" 
          v-model="form.collegeAndspeciality" 
          ></el-cascader>
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="form.grade">
            <el-option label="大一" :value="1"></el-option>
            <el-option label="大二" :value="2"></el-option>
            <el-option label="大三" :value="3"></el-option>
            <el-option label="大四" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="registerbutton" type="primary" @click="commitInfo">修改完成</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getUserInfo()
  },
  data() {
    return {
      test1:'test1',
      form: {
        userId : '',
        username : '',
        college : '',
        major : '',
        grade : '',
        collegeAndspeciality: ['学院','专业']
      },
      college: [
        {
          label: "计算机学院",
          value: "计算机学院",
          children: [
            {
              label: "计算机科学与技术",
              value: "计算机科学与技术"
            },
            {
              label: "软件工程",
              value: "软件工程"
            },
            {
              label: "人工智能",
              value: "人工智能"
            }
          ]
        }
      ],
    }
  },
  methods: {
    commitInfo() {
      console.log("userId5 :" + this.form.userId)
      console.log("您的学院是" + this.form.collegeAndspeciality[0] + "\n您的专业是" + this.form.collegeAndspeciality[1] + "\n您的年级是" + this.grade);
      this.$axios({
        url: 'http://localhost:8000/user/' + this.form.userId,
        method: 'put',
        headers: {
          AUTHORIZATION: sessionStorage.getItem('access-admin')
        },
        data: {
          username: this.form.username,
          college: this.form.collegeAndspeciality[0],
          major: this.form.collegeAndspeciality[1],
          grade: this.form.grade
        }
      }).then((response) => {
        console.log(response)
        this.$message.success('修改成功!')
        this.getUserInfo()
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
    },
    getUserInfo() {
      console.log("userId1 :" + this.form.userId)
      this.$axios.get("http://localhost:8000/getUserInfo", {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      }).then(res => {
        console.log(res.data)
        this.form.userId = res.data.id;
        this.form.username = res.data.username;
        this.form.college = res.data.college;
        this.form.major = res.data.major;
        this.form.grade = res.data.grade;
        this.form.collegeAndspeciality[0] = res.data.college;
        this.form.collegeAndspeciality[1] = res.data.major;
        console.log("userId2 :" + this.form.userId)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.response.data.message)
      })
      console.log("userId3 :" + this.form.userId)
    },
    test(){
      console.log("userId4 :" + this.form.userId)
    }
  }
}
</script>

<style>

</style>
